<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title><spring:message code="template.show"/></title>
	<meta name="decorator" content="default"/>
    <script src="${ctxStatic}/video/js/video.min.js" type="text/javascript"></script>
    <link href="${ctxStatic}/video/css/video-js.css" type="text/css" rel="stylesheet" />
    <style>
        .tu-con{}
        .tu-con .tu-con-sou{float: left; background: #3bb3e0;position: relative;font-size: 25px;}
        .tu-con .tu-con-sou .tu-con-item{position: absolute;}

    </style>
</head>
<body>
	<ul class="nav nav-tabs">
		<li><a href="${ctx}/templet/eleTemplet/"><spring:message code="template.list"/></a></li>
		<li class="active">
            <a href="${ctx}/templet/eleTemplet/show?id=${eleTemplet.id}">
                 <spring:message code="template.info"/>
            </a>
        </li>
	</ul>
	<form:form id="inputForm" modelAttribute="eleTemplet" action="${ctx}/templet/eleTemplet/save" method="post" class="breadcrumb form-search">
		<form:hidden id="eleTempletId" path="id"/><form:hidden path="flag"/>
		<sys:message content="${message}"/>
        <ul class="ul-form">
            <li><label><spring:message code="template.name"/>：</label>
                <span>${eleTemplet.name}</span>
            </li>
            <li><label><spring:message code='common.resolution'/>：</label>
                <span>${eleTemplet.width} X ${eleTemplet.height}</span>
            </li>
            <li><label><spring:message code="device.orientation"/>：</label>
                <span>${fns:getDictLabel(eleTemplet.displaymode, 'orientation', '')}
                </span>
            </li>
            <li><label><spring:message code='common.remarks'/>：</label>
                <span>${eleTemplet.remarks}</span>
            </li>
            <!-- 
             <li><label><spring:message code="full.screen"/>：</label>
                <span>${fns:getDictLabel(eleTemplet.fullscreen, 'truefalse', '')}</span>
            </li>
             -->
        </ul>
        <div class="ul-form tu-con">
            <div class="tu-con-sou"
                 style="width: ${templetWidth}px;
                         height: ${templetHeight}px;
                         <c:if test="${not empty eleTemplet.background.color}">
                             background-color: ${fns:getColor(eleTemplet.background.color)};
                         </c:if>
                         <c:if test="${empty eleTemplet.background.bgImage}">
                             background-image: url('${eleTemplet.background.bgGif}');
                         </c:if>
                         <c:if test="${not empty eleTemplet.background.bgImage}">
                             background-image: url('${eleTemplet.background.bgImage}');
                         </c:if>
                         ">
                <c:forEach items="${eleTemplet.eleTempletSourceList}" var="source">
                    <c:if test="${source.sourceType != 'apk'}">
                        <div title="${source.sourceType}" class="tu-con-item"
                             style="width: ${source.width}px;height: ${source.height}px;
                                     top:${source.yloc}px;left:${source.xloc}px;
                                     overflow: hidden;
                                     text-align: ${source.sourceDetail.align};
                                     background-color: ${fns:getColor(source.sourceDetail.bgcolor)};">
                        <c:choose>
                           <%-- <c:when test="${'image' eq source.sourceType}">

                            </c:when>--%>
                            <c:when test="${'date' eq source.sourceType || 'time' eq source.sourceType || 'week' eq source.sourceType
                                            || 'weather' eq source.sourceType}">
                                <div style="color: ${fns:getColor(source.sourceDetail.color)};
                                        font-size: ${source.sourceDetail.size}px;
                                        text-align:${source.sourceDetail.align};
                                        ${source.sourceDetail.area};
                                        line-height: ${source.height}px;">
                                    ${source.sourceDetail.content}
                                </div>
                            </c:when>
                            <c:when test="${'title' eq source.sourceType || 'sub' eq source.sourceType}">
                                <div style="color: ${fns:getColor(source.sourceDetail.color)};
                                        font-size: ${source.sourceDetail.size}px;
                                        text-align:${source.sourceDetail.align};
                                        ${source.sourceDetail.area};
                                        line-height: ${source.height}px;
                                        overflow: hidden;white-space: nowrap">
                                        ${source.sourceDetail.content}
                                </div>
                            </c:when>
                            <c:when test="${'floor' eq source.sourceType}">
                                <c:if test="${'image' == source.sourceDetail.type}">
                                        <div style="display: inline-block;">
                                            <div style='float:left;'><img src='${fns:getDictValue('website','website','')}${source.sourceDetail.imgpath}' style='position: relative;'/></div>
                                            <div style='float:left;'><img src='${fns:getDictValue('website','website','')}${source.sourceDetail.imgpath}' style='position: relative;'/></div>
                                        </div>
                                </c:if>
                                <c:if test="${'image' != source.sourceDetail.type}">
                                    <img src="${fns:getDictLabel('basePath', 'systemvalue', '')}${source.sourceDetail.imgpath}" style="width: ${source.width}px;height: ${source.height}px;">
                                </c:if>
                            </c:when>
                            <c:when test="${'logo' eq source.sourceType}">
                                <img src="${fns:getDictLabel('basePath', 'systemvalue', '')}${source.sourceDetail.imgpath}" style="width: ${source.width}px;height: ${source.height}px;">
                            </c:when>
                            <c:when test="${'multimedia' eq source.sourceType}">
                                <c:if test="${'default' == source.sourceDetail.type}">
                                    <img src="${ctxStatic}/images/videoimg.jpg"
                                         style="width: ${source.width}px;height: ${source.height}px;">
                                </c:if>
                                <c:if test="${'image' == source.sourceDetail.type}">
                                    <img src='${fns:getDictValue('website','website','')}${source.sourceDetail.imgpath}'
                                         style='width:100%;height:100%;line-height: initial;'/>
                                </c:if>
                                <c:if test="${'video' == source.sourceDetail.type}">
                                    <video src='${fns:getDictValue('website','website','')}${source.sourceDetail.imgpath}'
                                           controls='controls' loop="loop" autoplay width='100%' height='100%'>
                                </c:if>
                            </c:when>
                            <c:when test="${'direction' eq source.sourceType}">
                                <div align="center">
                                    <img src="${fns:getDictValue('website','website','')}${source.sourceDetail.imgpath}"
                                         style="width: ${source.width}px;height: ${source.height}px;">

                                    <%--style="width: ${source.width>source.height?source.width:source.height}px;
                                    height: ${source.width>source.height?source.width:source.height}px;">--%>
                                </div>
                            </c:when>
                            <c:when test="${'alarm' eq source.sourceType}">
                                <div align="center">
                                    <img src="${fns:getDictValue('website','website','')}${source.sourceDetail.imgpath}">
                                </div>
                            </c:when>
                            <c:when test="${'floored' eq source.sourceType}">
                                <table style="color:${fns:getColor(source.sourceDetail.color)};background-color: ${fns:getColor(source.sourceDetail.bgcolor)};font-size: ${source.sourceDetail.size}px;">
                                    <c:forEach var="k" begin="1" end="2" step="1">
                                        <tr>
                                            <c:forEach var="x" begin="1" end="${source.sourceDetail.column}" step="1">
                                                <td style="width: ${source.sourceDetail.width+source.sourceDetail.w_space}px;line-height: ${source.sourceDetail.lineheight+source.sourceDetail.size}px;" align="${source.sourceDetail.align}">88</td>
                                            </c:forEach>
                                        </tr>
                                    </c:forEach>
                                </table>
                            </c:when>
                            <c:otherwise>
                                    <img src="${ctxStatic}/images/source/${source.sourceType}.png"
                                         style="position: absolute;width: 50px;height: 50px;top: 50%;left: 50%;margin-left: -25px;margin-top: -25px;">
                            </c:otherwise>
                        </c:choose>
                        </div>
                    </c:if>
                </c:forEach>
            </div>
        </div>
        <div style="float: left;margin-top: 10px;">
            <shiro:hasPermission name="templet:eleTemplet:edit">
               	<a href="${ctx}/templet/eleTemplet/form?id=${eleTemplet .id}" class="btn btn-primary" style="margin-left: 30px;"><spring:message code="common.modify"/></a>
					<a href="${ctx}/templet/eleTemplet/applypublish?id=${eleTemplet .id}" class="btn btn-primary" style="margin-left: 30px;"><spring:message code="publish"/></a>
					<a href="${ctx}/templet/eleTemplet/delete?id=${eleTemplet .id}" class="btn btn-primary" style="margin-left: 30px;" onclick="return confirmx('<spring:message code='tips.delmodle' />', this.href)"><spring:message code='common.delete'/></a>
					<a href="${ctx}/templet/eleTemplet/copy?id=${eleTemplet .id}" class="btn btn-primary" style="margin-left: 30px;"><spring:message code="copy"/></a>
					<a href="${ctx}/templet/eleTemplet/download?id=${eleTemplet .id}" class="btn btn-primary" style="margin-left: 30px;"><spring:message code="download"/></a>
                <%--<a href="${ctx}/templet/eleTemplet/complete?id=${eleTemplet.id}" class="btn btn-primary" style="margin-left: 30px;"><spring:message code="common.done"/></a>--%>
            </shiro:hasPermission>
        </div>
	</form:form>
</body>
</html>